<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>MoroccoBy</title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"></link>
        <link  href="styles/panier.css" rel="stylesheet" type="text/css"></link>
        <link href="styles/smart_wizard.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="resources/scripts//jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="resources/scripts//jquery.smartWizard-2.0.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                // Smart Wizard 	
                $('#wizard').smartWizard();
      
                function onFinishCallback(){
                    $('#wizard').smartWizard('showMessage','Finish Clicked');
                }     
            });
        </script>
    </h:head>
    <h:body>

        <ui:include src="head.xhtml"></ui:include>

        <div class="main_container">
            <div id="main_content"> 

                <div class="crumb_navigation">
                    Navigation: <span class="current">Home</span>

                </div>        

                <div class="left_content">

                    <div class="title_box">Categories</div>

                    <ul class="left_menu">
                        <h:form>
                            <c:forEach items="#{homeMB.list}" var="item" varStatus="status">
                                <li class="even">
                                    <h:commandLink  action="#{homeMB.getProduits}" value="#{item.libelle}">
                                        <f:param name="idCategorie" value="#{item.id}" />
                                    </h:commandLink>
                                </li>
                            </c:forEach>
                        </h:form>
                    </ul> 

                    <div class="title_box">Special Products</div>  
                    <div class="border_box">
                        <div class="product_title"><a href="details.html">Motorola 156 MX-VL</a></div>
                        <div class="product_img"><a href="details.html"><img src="images/laptop.png" alt="" title="" border="0" /></a></div>
                        <div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
                    </div>  


                    <div class="title_box">Newsletter</div>  
                    <div class="border_box">
                        <input type="text" name="newsletter" class="newsletter_input" value="your email"/>
                        <a href="#" class="join">join</a>
                    </div>  

                    <div class="banner_adds">

                        <a href="#"><img src="images/bann2.jpg" alt="" title="" border="0" /></a>
                    </div>    


                </div><!-- end of left content -->


                <div class="center_content">
                    <div class="center_title_bar">Latest Products</div>


                    <h:form>
                        <div id="wizard" class="swMain">
                            <ul>
                                <li><a href="#step-1">
                                        <label class="stepNumber"></label>
                                        <span class="stepDesc">
                                            Etape 1<br />
                                            <small>Resumé du commande</small>
                                        </span>
                                    </a></li>
                                <li><a href="#step-2">
                                        <label class="stepNumber"></label>
                                        <span class="stepDesc">
                                            Etape 2<br />
                                            <small>Identification</small>
                                        </span>
                                    </a></li>
                                <li><a href="#step-3">
                                        <label class="stepNumber"></label>
                                        <span class="stepDesc">
                                            Etape 3<br />
                                            <small>Etape 3 Adresses</small>
                                        </span>                   
                                    </a></li>
                                <li><a href="#step-4">
                                        <label class="stepNumber"></label>
                                        <span class="stepDesc">
                                            Etape final<br />
                                            <small>Paiement</small>
                                        </span>                   
                                    </a></li>
                            </ul>
                            <div id="step-1">	
                                <h2 class="StepTitle">Panier</h2>




                                <div id="cmd" class="table_block">
                                    <table id="cart_summary" class="std" >
                                        <thead>
                                            <tr>
                                                <th class="cart_product first_item">Article</th>
                                                <th class="cart_description item">Nom du produit</th>
                                                <th class="cart_ref item">Réf.</th>
                                                <th class="cart_unit item">Prix</th>
                                                <th class="cart_quantity item">Quantité</th>
                                                <th class="cart_total item">Total</th>
                                                <th class="cart_delete last_item"></th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr class="cart_total_price">
                                                <td colspan="5" id="cart_voucher" class="cart_voucher">
                                                </td>
                                                <td colspan="2" class="price total_price_container" id="total_price_container">
                                                    <p>Total</p>
                                                    <span id="total_price">
                                                        <h:outputText id="tot" value="#{panier.total}"></h:outputText>
                                                    </span>
                                                </td>
                                            </tr>
                                        </tfoot>
                                        <tbody>

                                            <ui:repeat value="#{panier.produits}" var="lignePanier" >

                                                <tr id="product_1_18_0_0" class="cart_item last_item address_0 odd">
                                                    <td class="cart_product">
                                                        <a href=""><img src="" /></a>
                                                    </td>
                                                    <td class="cart_description">
                                                        <p class="s_title_block"><a href="">iPod Nano</a></p>
                                                        <a href="">Capacité : 16Go, Couleur : Noir</a>	</td>
                                                    <td class="cart_ref">demo_1</td>
                                                    <td class="cart_unit">
                                                        <span class="price" id="product_price_1_18_0">
                                                            <span style="text-decoration:line-through;">199,00 €</span><br/>189,05 </span>
                                                    </td>
                                                    <td class="cart_quantity">

                                                        <h:inputText  size="2" value="#{lignePanier.qte}" > 
                                                            <f:ajax  event="keyup"  update="tot" /> 
                                                            <f:ajax  event="keyup" render="text" /> 
                                                        </h:inputText> 
                                                    </td>
                                                    <td class="cart_total">
                                                        <span class="price" id="total_product_price_1_18_0">
                                                            <h:outputText id="text"  value="#{lignePanier.souTotal}">
                                                            </h:outputText>
                                                        </span>
                                                    </td>
                                                    <td class="cart_delete">
                                                        <div>
                                                            <a class="cart_quantity_delete" id="1_18_0_0" href="">Supprimer</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </ui:repeat>
                                        </tbody>
                                    </table>
                                </div>






                            </div>
                            <div id="step-2">
                                <h2 class="StepTitle">Authentification</h2>	

                                <table cellpadding="10">
                                    <tr>
                                        <td width="50%">

                                            Vous n'etes pas connecté ?
                                            <a href="creecompte.xhtml">crée Compte  </a>
                                        </td>
                                        <td>
                                            <div id="login">

                                                <h:form>

                                                    <input type="text" name="login" value="" placeholder="Utilmisateur"></input><br/>
                                                    <input type="password" name="password" value="" placeholder="Mot de pass"></input>
                                                    <p class="remember_me">
                                                        <label>
                                                            <a href="#" >Mot de passe oublié ?</a>
                                                        </label>
                                                    </p>
                                                    <p class="submit"> <input type="submit" name="commit" value="Login"></input></p>
                                                </h:form>

                                            </div>

                                        </td>
                                    </tr>

                                </table>

                            </div>                      
                            <div id="step-3">
                                <h2 class="StepTitle">Step 3 Content</h2>	

                                <h:outputText value="Choisir adresse "></h:outputText>
                                <h:selectOneMenu value="">
                                    <f:selectItem itemValue="1" itemLabel="Coffee" />
                                </h:selectOneMenu>
                                <table>
                                    <tr>
                                        <td>
                                            VOTRE ADRESSE DE LIVRAISON <br/>
                                            SLS LAM
                                            DFDS
                                            FDSFSD
                                            FDSF
                                            45465 FSDF
                                            FRANCE
                                        </td>

                                        <td>

                                            VOTRE ADRESSE DE FACTURATION 
                                            <br/>
                                            SLS LAM
                                            DFDS
                                            FDSFSD
                                            FDSF
                                            45465 FSDF
                                            FRANCE
                                        </td>

                                    </tr>


                                </table>

                            </div>
                            <div id="step-4">
                                <h2 class="StepTitle">Step 4 Content</h2>	

                                <p class="payment_module">
                                    <a href="" title="Payer par chèque">
                                        <img src="/prestashop/prestashop/modules/cheque/cheque.jpg" alt="Payer par chèque" width="86" height="49"></img>
                                        Payer par chèque (traitement plus long)
                                    </a>
                                </p>

                            </div>
                        </div>
                    </h:form>
                    <!-- End SmartWizard Content -->  		


                    <div class="center_title_bar">Recommended Products</div>

                    <div class="prod_box">
                        <div class="top_prod_box"></div>
                        <div class="center_prod_box">            
                            <div class="product_title"><a href="details.html">Motorola 156 MX-VL</a></div>
                            <div class="product_img"><a href="details.html"><img src="images/laptop.gif" alt="" title="" border="0"/></a></div>
                            <div class="prod_price"> <span class="price">270$</span></div>                        
                        </div>
                        <div class="bottom_prod_box"></div>             
                        <div class="prod_details_tab">
                            <a href="#" title="Ajouter au panier">
                                <img src="images/cart.gif" alt="" title="" border="0" class="left_bt"/></a>
                            <a href="details.html" class="prod_details">details</a>            
                        </div>                     
                    </div>

                </div><!-- end of center content -->

                <div class="right_content">

                    <div class="title_box">Connexion</div>

                    <div id="login">

                        <h:form rendered="#{sessionScope['UserLogged'] eq null}">
                            <h:inputText id="email" value="#{authentificationBean.email}" ></h:inputText><br/>
                            <h:inputSecret id="password" value="#{authentificationBean.password}" ></h:inputSecret>
                            <p class="remember_me">
                                <label>
                                    <a href="#" >Mot de passe oublié ?</a>
                                </label>
                            </p>
                            <p class="submit"> <h:commandButton type="submit" action="#{authentificationBean.login}" value="Login"></h:commandButton></p>
                        </h:form>

                        <h:form rendered="#{sessionScope['UserLogged'] ne null}">
                            Bienvenue  #{sessionScope['UserLogged'].compte.pseudo}
                            <h:commandLink action="#{authentificationBean.logout}" value="Deconnexion"></h:commandLink>
                        </h:form>

                    </div>


                    <div class="title_box">What’s new</div>  

                    <ul class="left_menu">
                        <li class="odd"><a href="services.html">Sony</a></li>
                        <li class="even"><a href="services.html">Samsung</a></li>
                        <li class="odd"><a href="services.html">Daewoo</a></li>
                        <li class="even"><a href="services.html">LG</a></li>
                        <li class="odd"><a href="services.html">Fujitsu Siemens</a></li>
                        <li class="even"><a href="services.html">Motorola</a></li>
                        <li class="odd"><a href="services.html">Phillips</a></li>
                        <li class="even"><a href="services.html">Beko</a></li>
                    </ul>      

                    <div class="banner_adds">

                        <a href="#"><img src="images/bann1.jpg" alt="" title="" border="0" /></a>
                    </div>        

                </div><!-- end of right content -->   


            </div><!-- end of main content -->

        </div>
        <ui:include src="footer.xhtml"></ui:include>

    </h:body>

</html>

